import React, { Component } from 'react'

export class Header extends Component {
  render() {
    const { tablist, active, change } = this.props;
    return (
      <header>
        <ul>
          {
            tablist.length && tablist.map((item, index) => {
              return <li key={item.id} className={active === index ? 'on' : ''} onClick={()=>{
                change(index)
              }}>
                {item.title}
              </li>
            })
          }
        </ul>
      </header>
    )
  }
}

export default Header